<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <blockquote class="layui-elem-quote">
            Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br>
            <a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a>
        </blockquote>
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>





                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="save"> 保存 </button>
                    </div>
                </script>


                <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>

        </div>
    </div>
</div>


<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/jquery-1.12.1.min.js"></script>
<script src="/js/common.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable','layer','form'], function () {
        var $ = layui.jquery;
        var form=layui.form;
        var layer=layui.layer;
        var table = layui.table;
        var treetable = layui.treetable;

        var url = decodeURI(window.location.href);
        var argsIndex = url.split("?obj=");
        var arg = argsIndex[1];

        //菜单角色
        let roleMenuModel=api.getRoleModel(arg);
        //已经授权的菜单id
        let roleMenuMenuIdList=api.getRoleMenuMenuIdlList(arg);
        let array=roleMenuMenuIdList.data;
        //菜单列表

        loadTreetable();
        function loadTreetable(){
            let dataObj=api.getmenutableall();
            // 渲染表格
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                elem: '#munu-table',
                toolbar: '#toolbarDemo',
                data:dataObj.data,
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'title', minWidth: 200, title: '菜单名称'},
                    {field: 'authority', title: '权限标识',width: 200},
                    {field: 'href', title: '菜单url',width: 200},
                    {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
                    {
                        field: 'id', width: 80, align: 'center', templet: function (d) {
                            if (array.includes(d.id)) {
                                return '<span class="layui-badge layui-bg-blue">已授权</span>';
                            }else {
                                return '<span class="layui-badge layui-bg-gray">未授权</span>';
                            }
                        }, title: '是否授权'
                    },
                    {
                        field: 'ismenu', width: 80, align: 'center', templet: function (d) {
                            if (d.ismenu == 1) {
                                console.log(d.ismenu+" 11")
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            }
                            if (d.pid == 0) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {
                        field: 'id', width: 200, align: 'center', templet: function (d) {
                            if (array.includes(d.id)) {
                                return'      <input type="checkbox" checked="" name="close" value='+d.id+' lay-skin="switch"  lay-filter="switchTest" lay-text="ON|OFF">\n' ;
                            }else {
                                return'      <input type="checkbox"  name="close" lay-skin="switch" value='+d.id+'  lay-filter="switchTest" lay-text="ON|OFF">\n' ;
                            }
                        }, title: '授权'
                    }
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        }


        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if(index > -1){this.splice(index,1);}
        }

        form.on('switch(switchTest)', function(obj){
            if(obj.elem.checked){
                let num=parseInt(this.value)
                array.push(num)
                console.log("方入"+JSON.stringify(array))
            }else {
                let num=parseInt(this.value)
                array.remove(num);
                console.log("移除"+JSON.stringify(array))
            }
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(munu-table)', function (obj) {
            let res={};
            res.roleId=arg;
            res.menuIds=array;
            let data=api.saveRoleMenuModel(res);
            layer.msg(data.msg);
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {

        });


        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                update(data)
            }else if (layEvent === 'save') {
                layer.msg("授权"+data.id)
            }
        });

        //新增
        let index
        function save(data) {

            //表单赋值
            form.val('example',{
                pidname:data.title,
                pid:data.id
            });
        }

    });
</script>
</body>
</html>